.app {
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading65 {
  position: relative;
  transform: rotate(45deg);
}

.loading65:before,
.rectangle65::before,
.rectangle65::after {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid #333333;
  border-radius: 4px;
  box-sizing: border-box;
  position: absolute;
}

.loading65:before {
  top: 0;
  left: 0;
  animation: eff651 4s ease-in-out infinite;
  animation-delay: 0.45s;
}
.rectangle65::before {
  top: 12px;
  left: 0px;
  animation: eff652 4s ease-in-out infinite;
  animation-delay: 0.65s;
}
.rectangle65::after {
  top: 0px;
  left: 12px;
  animation: eff653 4s ease-in-out infinite;
  animation-delay: 0.25s;
}

@keyframes eff651 {
  0%,
  10% {
    top: 0;
    left: 0;
  }
  15%,
  35% {
    top: 0;
    left: 12px;
  }
  40%,
  60% {
    top: 12px;
    left: 12px;
  }
  65%,
  85% {
    top: 12px;
    left: 0;
  }
  90%,
  100% {
    top: 0;
    left: 0;
  }
}
@keyframes eff652 {
  0%,
  10% {
    top: 12px;
    left: 0;
  }
  15%,
  35% {
    top: 0;
    left: 0;
  }
  40%,
  60% {
    top: 0;
    left: 12px;
  }
  65%,
  85% {
    top: 12px;
    left: 12px;
  }
  90%,
  100% {
    top: 12px;
    left: 0;
  }
}
@keyframes eff653 {
  0%,
  10% {
    top: 0;
    left: 12px;
  }
  15%,
  35% {
    top: 12px;
    left: 12px;
  }
  40%,
  60% {
    top: 12px;
    left: 0;
  }
  65%,
  85% {
    top: 0;
    left: 0;
  }
  90%,
  100% {
    top: 0;
    left: 12px;
  }
}
